<script setup lang="ts">
  import { ElMenuItem } from 'element-plus'
  import { StrUtil } from '@xtail/core'
  import { SIcon, SAnimateCss } from '@xtail/vue3'
  import { MenuItemPropsType } from './types'

  defineOptions({
    name: 'XMenuItem'
  })

  withDefaults(defineProps<MenuItemPropsType>(), {
    icon: SIcon,
    title: '',
    collapse: false,
    labelAnimateProps: {} as any,
    clickHandler: () => {}
  })
</script>

<template>
  <el-menu-item
    class="x-menu-item"
    :index="index"
    :route="route"
    :disabled="disabled"
    @click="item => clickHandler(item)"
  >
    <template #default>
      <s-animate-css v-if="!collapse" class="x-menu-item__label" v-bind="labelAnimateProps">
        <slot name="icon" :icon="icon" :icon-props="iconProps">
          <component :is="icon" v-if="icon" class="x-menu-item__icon" v-bind="iconProps" />
        </slot>
        <slot name="title" :title="title">
          <div class="x-menu-item__title" :class="[icon ? 'x-menu-item__title-ml' : '']">
            <div v-if="StrUtil.isStr(title)">{{ title }}</div>
            <component :is="title" v-else v-bind="titleProps" />
          </div>
        </slot>
      </s-animate-css>
      <s-animate-css v-else class="x-menu-item__label" v-bind="labelAnimateProps">
        <slot name="icon" :icon="icon" :icon-props="iconProps">
          <component :is="icon" v-if="icon" class="x-menu-item__icon" v-bind="iconProps" />
        </slot>
      </s-animate-css>
    </template>
    <template v-if="collapse" #title>
      <slot name="title" :title="title">
        <div class="x-menu-item__title">
          <div v-if="StrUtil.isStr(title)">{{ title }}</div>
          <component :is="title" v-else v-bind="titleProps" />
        </div>
      </slot>
    </template>
  </el-menu-item>
</template>

<style lang="scss">
  @use './style' as *;
</style>
